<template>
	<view class="page_content">
		<view class="header_view">
			<uni-search-bar textColor="#262626" placeholder="搜索产品" radius="12" cancelButton="none" bgColor="#F3F4F6" @confirm="searchGoods" :focus="false" v-model="keyWord" @clear="clearInput">
				<template #searchIcon>
					<image src="/static/product/search.png" mode="aspectFill" style="margin-left: 8rpx; width: 28rpx;height: 28rpx;"></image>
				</template>
				<template #clearIcon>
					<view style="width: 20px;height: 2px;">
					</view>
					<uni-icons color="#c0c4cc" size="16" type="clear"/>
				</template>
			</uni-search-bar>
			<scroll-view class="h-scroller-content" scroll-x="true" :show-scrollbar="false" enhanced="true" enable-flex="true">
				<view class="h-scroller">
					<view class="categoryItem" :class="currentCategoryIndex == index ? 'categoryItem_selected' : 'categoryItem_normal'" v-for="(item,index) in categoryList" :key="index" :data-row="index" @click.stop="onTapCategory">
						{{item}}
					</view>
				</view>
			</scroll-view>
		</view>
		
		<scroll-view class="scroll_view_content" scroll-y="true" :show-scrollbar="false" enhanced="true">
			<view class="list_view_content">
				<view class="list_view_item" v-for="(item, index) in list" :key="index">
					<cs-product-item-vue :info="item" @onRowClick=seeDetail></cs-product-item-vue>
				</view>
			</view>
			<view style="height: 40rpx;"></view>
		</scroll-view>
	</view>
</template>

<script>
	import csProductItemVue from './cs-product-item.vue';
	export default {
		components:{
			csProductItemVue
		},
		data() {
			return {
				list:[],
				keyWord:"",
				categoryList:['全部'],
				currentCategoryIndex:0
			}
		},
		onLoad() {
			const request1 = this.$NetApi.getMethod('/loyu-api/app/product/tag');
			const request2 = this.$NetApi.getMethod('/loyu-api/app/product/list', this.getParams());
			
			let self = this;
			self.$progressHud.showLoading();
			Promise.all([request1, request2])
			  .then(responses => {
				  self.$progressHud.hideLoading();
				  self.categoryList = self.categoryList.concat(responses[0].data);
				  self.list = responses[1].rows;
			  })
			  .catch(error => {
				  self.$progressHud.hideLoading();
				  self.$progressHud.showToast(error.errMsg || '网络错误');
			  });
		},
		methods: {
			onTapCategory(e){
				this.currentCategoryIndex = e.currentTarget.dataset.row;
				this.searchGoods();
			},
			seeDetail(e){
				var itemId = e.currentTarget.dataset.row.id || '';
				this.$Router.push({
					path:'/modules/products/pages/productDetail/productDetail',
					query:{
						itemId:itemId
					}
				})
			},
			getParams(){
				var tagName = this.categoryList[this.currentCategoryIndex];
				if(tagName == '全部'){
					tagName = ''
				}
				return {
					keyWord:this.keyWord,
					pageNum:1,
					pageSize:10,
					tag:tagName
				}
			},
			searchGoods(){
				let name = this.categoryList[this.currentCategoryIndex];
				let self = this;
				
				self.$progressHud.showLoading();
				self.$NetApi.getMethod('/loyu-api/app/product/list', this.getParams()).then(ok => {
					self.$progressHud.hideLoading();
					self.list = ok.rows;
				}, fail => {
					self.$progressHud.hideLoading();
					self.$progressHud.showToast(fail.errMsg || '网络错误');
				})
				
			},
			clearInput(){
				this.keyWord = ""
				this.searchGoods();
			}
		}
	}
</script>

<style lang="scss" scoped>
.page_content{
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	background-color: #FFFFFF;
}
.header_view{
	width: 100%;
	height: 244rpx;
	overflow: hidden;
}
.scroll_view_content{
	flex: 1;
	width: 100%;
	overflow: auto;
}

.list_view_content{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
	margin-left: 32rpx;
	margin-right: 32rpx;
	row-gap: 26rpx;
	column-gap: 24rpx;
}
.list_view_item{
	flex-shrink: 0;
	width: calc(50% - 13rpx);
}

.uni-searchbar{
	margin: 16rpx 32rpx;
	height: 80rpx;
	padding: 0px;
}

.categoryItem{
	padding: 12rpx 24rpx;
	border-radius: 36rpx;
	flex-shrink: 0;
	color: white;
	font-size: 28rpx;
	font-weight: normal;
	line-height: 40rpx;
}
.categoryItem_normal{
	background-color: #F3F4F6;
	color: #4B5563;
}
.categoryItem_selected{
	background-color: $power-color-primary;
	color: white;
}
.h-scroller-content{
	margin-left: 32rpx;
	margin-top: 24rpx;
	margin-right: 32rpx;
	width: calc(100% - 64rpx);
	height: 88rpx;
}
.h-scroller{
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	gap: 16rpx;
}
</style>
